<template>
    <div style="width:100%;height:100%;overflow: hidden;">
     <div id="main-map"></div>
    </div>
</template>
<script>
import imag from '../../src/assets/timg.gif'
export default {
    data () {
        return {
         map:null,
         context:null,
         data :null,
         image:null,
         width:200,
         height:200,
         size:200
        }
    },
    mounted() {
        this.init();
    },
    methods:{
        onAdd() {
                var canvas = document.createElement('canvas');
                canvas.width = this.width;
                canvas.height = this.height;
                this.context = canvas.getContext('2d');
        },
        render() {
            var _this=this;
                var duration = 1000;
                var t = (performance.now() % duration) / duration;
                
                var radius = _this.size / 2 * 0.3;
                var outerRadius =_this.size / 2 * 0.7 * t + radius;
                var context = _this.context;
                
                // draw outer circle
                context.clearRect(0, 0, _this.width, _this.height);
                context.beginPath();
                context.arc(_this.width / 2, _this.height / 2, outerRadius, 0, Math.PI * 2);
                context.fillStyle = 'rgba(255, 200, 200,' + (1 - t) + ')';
                context.fill();
                
                // draw inner circle
                context.beginPath();
                context.arc(_this.width / 2, _this.height / 2, radius, 0, Math.PI * 2);
                context.fillStyle = 'rgba(255, 100, 100, 1)';
                context.strokeStyle = 'white';
                context.lineWidth = 2 + 4 * (1 - t);
                context.fill();
                context.stroke();
                
                // update this image's data with data from the canvas
                _this.data = context.getImageData(0, 0, _this.width, _this.height).data;
                 _this.map.triggerRepaint();
                console.log(_this.map,3333)
                // continuously repaint the map, resulting in the smooth animation of the dot
                // _this.map.triggerRepaint();
                
                // return `true` to let the map know that the image was updated
                return true;
                },
         
        init(){
          this.smartmapx.mapbase = 'http://www.smartmapx.com';
          this.smartmapx.apikey = 'eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJuYmYiOjE1MzcxODM1OTgsImRhdGEiOiJ7XCJsb2dpbl9uYW1lXCI6XCJyb290XCIsXCJnZW5kZXJcIjoyLFwidXNlcl9pZFwiOlwiZm1fc3lzdGVtX3VzZXJfcm9vdFwiLFwidXNlcl9uYW1lXCI6XCJyb290XCIsXCJ1c2VyX29yaWdpbl9pZFwiOlwiZm1fbG9jYWxcIixcInByb2R1Y3RfaWRcIjpcIlwiLFwiZXhwaXJlX3RpbWVcIjpcIlwiLFwic291cmNlX2lkXCI6XCJcIixcInR5cGVcIjpcIlwiLFwiY29ycF9pZFwiOlwiZm1fc3lzdGVtX2NvcnBcIn0iLCJleHAiOjQwOTI1OTkzNDksImp0aSI6ImFfNjhmZjBhZGY5OTcxNDQ0NThjNzViZWFiN2FjNTkzYWYifQ.W122WkT6QR4HZWbpalkpmirV9JWkDYcCkmNZoxCB_z8';
          this.map=new this.smartmapx.Map({
              container: 'main-map',
              mapId: 'map_id_1',
              center: [117.18423,39.040199],
              zoom: 7.9
            });
            this.map.addControl(new this.smartmapx.NavigationControl(),'top-right');
            this.map.addControl(new this.smartmapx.ScaleControl({
              maxWidth: 100,
              unit: 'm'
            }));
            this.imag=imag;
            var size = 200;
            var pulsingDot = {
                width: size,
                height: size,
                data: new Uint8Array(size * size * 4),
                onAdd:this.onAdd(),
                render:this.render()
                };
            this.map.on('load',() =>{
              this.map.addImage('pulsing-dot', pulsingDot, { pixelRatio: 2 });
                this.map.addLayer({
                "id": "points",
                "type": "symbol",
                "source": {
                "type": "geojson",
                "data": {
                "type": "FeatureCollection",
                "features": [{
                "type": "Feature",
                "geometry": {
                "type": "Point",
                "coordinates": [117.18423,39.040199]
                }
                }]
                }
                },
                "layout": {
                "icon-image": "pulsing-dot"
                }
                });

            });
        }
    }
}
</script>
<style lang="scss" scoped>
#main-map{
    width: 100%;
    height: 100%;
}
</style>